<template>
  <div>
    <div class="title">生成计划</div>
    <div class="content">
      <el-form ref="form"
              :disabled="seeFlag"
               :model="form"
               size="small"
               inline
               label-width="135px"
               label-position="auto"
               label-suffix="："
               :rules="rules">

        <div class="line">
          <el-form-item label="贸易类型"
                        prop="tradeFlag">
            <el-select v-model="form.tradeFlag"
                       placeholder="请选择"
                       clearable
                       filterable
                       style="width:150px">
              <el-option :label="item.meaning"
                         :value="item.lowValue"
                         v-for="item,index in dataList.INTERNALFG_IM"
                         :key="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="出口船名航次"
                        prop="voyId">

                        <el-tooltip :content="form.voyName1"
                      placement="bottom"
                      popper-class="testtooltip" v-if="seeFlag">
                      <el-select
                        v-model="form.voyId"
                        @change="voyName"
                        placeholder="搜索查询更多"
                        clearable
                        filterable
                        remote
                        :remote-method="remoteMethod"
                        style="width:150px">
                        <el-option v-for="item in shipNo"  :key="item.id" :label="item.termCode + '/' + item.vslName+'/'+item.voyage+'/'+(item.iefg==='I'?'进口':'出口')"
                        :value="item.id"
                        ></el-option>
              </el-select>
                  </el-tooltip>
                  <el-select
                        v-model="form.voyId"
                        @change="voyName"
                        placeholder="搜索查询更多"
                        clearable
                        filterable
                        style="width:150px"
                        remote
                        :remote-method="remoteMethod"
                        v-else>
                        <el-option v-for="item in shipNo"  :key="item.id" :label="item.termCode + '/' + item.vslName+'/'+item.voyage+'/'+(item.iefg==='I'?'进口':'出口')"
                        :value="item.id"
                        ></el-option>
              </el-select>

            </el-form-item>
                    <!-- JSON.stringify(item) +item.iefg-->

        </div>

        <el-form-item label="作业码头"
                      prop="termCode">
          <el-select clearable style="width: 150px" size="small"
                   v-model="form.termCode" placeholder="请选择作业码头" :disabled="termDis">
            <el-option  :label="item.cnName" :value="item.termCode"  v-for="item,index in termList" :key="index"></el-option>
          </el-select>
        </el-form-item>
        <!-- @change="getVel" <el-form-item label="码头作业区"
                    prop="workzone">
          <el-select v-model="form.workzone"
                    :disabled="!form.termCode"
                     placeholder="请选择"
                     clearable
                     filterable
                     style="width:150px">
            <el-option v-for="item in dataList.workZone"
                       :key="item.id"
                       :label="item.cnName"
                       :value="item.id"></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="申请人"
                      prop="cstCoperName">
          <el-input v-model="form.createUser"
                    placeholder=""
                    clearable
                    disabled
                    style="width:150px"></el-input>
        </el-form-item>
        <el-form-item label="开始时间"
                      prop="opsttm">
          <el-date-picker type="datetime"
                          @change="setVal"
                          placeholder="选择日期"
                          clearable
                          value-format="yyyy-MM-dd HH:mm:ss"
                          v-model="form.opsttm"
                          style="width:150px"></el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间"
                      prop="opedtm">
          <el-date-picker type="datetime"
                          placeholder="选择日期"
                          disabled
                          clearable
                          value-format="yyyy-MM-dd HH:mm:ss"
                          v-model="form.opedtm"
                          style="width:150px"></el-date-picker>
        </el-form-item>
        <el-form-item label="结算方式"
                      prop="payMode">
          <el-select v-model="form.payMode"
                     disabled
                     placeholder="请选择"
                     clearable
                     filterable
                     style="width:150px">
            <el-option v-for="item in dataList.SETTLEMODE"
                       :key="item.lowValue"
                       :label="item.meaning"
                       :value="item.lowValue"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="付款单位"
                      prop="payer">
          <el-select v-model="form.payer"
                     placeholder="请选择"
                     clearable
                     filterable
                     style="width:150px">
            <el-option v-for="item in dataList.cstCoperListtomer"
                       :key="item.customerCode"
                       :label="item.name"
                       :value="item.customerCode"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="货主单位"
                      prop="consignor">
          <el-select v-model="form.consignor"
                     placeholder="请选择"
                     clearable
                     filterable
                     style="width:150px">
            <el-option v-for="item in dataList.consignor"
                       :key="item.customerCode"
                       :label="item.name"
                       :value="item.customerCode"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="车队单位"
                      prop="cstTrnscomCd">
          <el-select v-model="form.cstTrnscomCd"
                     placeholder="请选择"
                     clearable
                     filterable
                     style="width:150px">
            <el-option v-for="item in dataList.cstTrnscomCd"
                       :key="item.customerCode"
                       :label="item.name"
                       :value="item.customerCode"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="发票抬头"
                      prop="title">
          <el-input v-model="form.title"
                    placeholder="请输入"
                    clearable
                    filterable
                    style="width:150px">
          </el-input>
        </el-form-item>
        <el-form-item label="备注"
                      prop=""
                      style="display:block">
          <el-input type="textarea"
                    placeholder="请输入船期备注"
                    clearable
                    v-model="form.remark"
                    style="width:710px"></el-input>
        </el-form-item>
        <el-form-item

                    label="附件"
                    prop="planAttachmentList"
                    style="display:block">
        <uploadImg @set="getFile" ref="myUpload" :seeFlag="seeFlag"></uploadImg>
      </el-form-item>
      </el-form>
      <div class="btn">
          <el-upload
                  action="#"
                  :show-file-list="false"
                  :before-upload="batchImportEmpty"
          >
              <el-button icon="el-icon-upload2" class="add" slot="trigger" type="primary">箱导入</el-button>
              <el-button type="primary"
                         class="add"
                         icon="el-icon-plus"
                         @click="add" v-if="!seeFlag">新增箱</el-button>
              <el-button type="primary"
                         class="add"
                         icon="el-icon-download"
                         @click="downLoadEmptyBox" v-if="!seeFlag">模板下载</el-button>
          </el-upload>

      </div>
    </div>
  </div>
</template>

<script>
import uploadImg from '@/components/uploadImg.vue'
import moment from 'moment'
import {downloadExcelTemplate} from "@/util/CommUtil";
export default {
  name: 'addPlan',
  components: { uploadImg },
  props: {
    showUpload: {
      default: true,
    },
    seeFlag:{
      default:false
    },
    planTag:{
      default:null,
    },
    termDis:{
      default:true,
    }
  },
  data() {
    return {
      palnTagList: [
        { key: 'PFRF', value: '提重返重' },
        { key: 'PFRE', value: '提重返空' },
        { key: 'PERF_WC', value: '提空返重（指定箱号）' },
        { key: 'PERF_NC', value: '提空返重（不指定箱号）' },
        { key: 'PE_WC', value: '提空箱（指定箱号）' },
        { key: 'PE_NC', value: '提空箱（不指定箱号）' },
        { key: 'PF', value: '提重箱' },
        { key: 'IF', value: '进重箱' },
        { key: 'IE', value: '进空箱' },
        { key: 'BOX', value: '装箱' },
        { key: 'UNBOX', value: '拆箱' },
      ],
      termList:[],
      form1: {},
      form: {
        payMode:'ZD'
      },
      oriForm: {
        payMode:'ZD'
      },
      rules: {
        tradeFlag: [
          { required: true, message: '请选择贸易类型', trigger: 'change' },
        ],
        voyId: [
          { required: true, message: '请选择出口船名航次', trigger: 'change' },
        ],
        termCode: [
          { required: true, message: '请选择作业码头', trigger: 'blur' },
        ],
        workZone: [
          { required: true, message: '请选择码头作业区', trigger: 'change' },
        ],
        opsttm: [
          { required: true, message: '请选择开始时间', trigger: 'change' },
        ],
        opedtm: [
          { required: true, message: '请选择结束时间', trigger: 'blur' },
        ],
        payMode: [
          { required: true, message: '请选择结算方式', trigger: 'change' },
        ],
        payer: [
          { required: true, message: '请选择付款单位', trigger: 'change' },
        ],
        cstTrnscomCd: [
          { required: true, message: '请选择车队单位', trigger: 'change' },
        ],
         planAttachmentList: [
          { required: true, message: '请选择附件', trigger: 'change' },
        ],
      },
      dataList: {},
      shipNo: [],
    }
  },
  watch: {
    form() {
      if ('HX' === this.form.termCode) {
        this.set()
        this.getWork()
      }
      if(this.form.id){
        this.voyId(this.form.voyId)
      }
    },
    planTag:{
      immediate:true,
      handler:function(){
        let that=this
          this.$nextTick(() => {
            that.palnTagList.forEach((item) => {
              console.log(this.planTag)
              if (that.planTag === item.key) {
                that.form.planTag = item.key
                that.form.planTagName = item.value
                if(['提空返重（不指定箱号）','提空返重（指定箱号）','进空箱','进重箱','提空箱（不指定箱号）','装箱（不指定箱号）'].includes(that.form.planTagName)){
                  this.form.opedtm='9998-12-31 23:59:59'
                  this.$forceUpdate()
                }
              }
            })
            this.oriForm = JSON.parse(JSON.stringify(this.form))
          })
      }
    },
  },
  methods: {
    downLoadEmptyBox(){
        downloadExcelTemplate('emptyBoxTemplate.xls')
    },
    batchImportEmpty(file){
        this.$emit('batchImportEmpty',file)
    },
    setVal(){
      if(''!==this.form.opsttm){
        console.log(9999)
        console.log(this.form.planTagName)
        if(['提重返空','提重','提空箱（指定箱号）','拆箱','装箱（指定箱号）'].includes((this.form.planTagName))){
            console.log(this.form.opsttm)
            this.form.opedtm=moment(this.form.opsttm).add(7,'days').subtract(1,'seconds').format('YYYY-MM-DD HH:mm:ss')
            this.$forceUpdate()
            //.subtract(1,'seconds')
        }
      }
    },
    voyId(id){
      console.log(99999)
      this.shipNo.forEach(item=>{
        if(id===item.id){
          this.form.voyName1=item.vslName+'/'+item.voyage+'/'+(item.iefg==='I'?'进口':'出口')
          console.log(888)
        }
      })
    },
    voyName(id){
      console.log(id)
      this.shipNo.forEach(res=>{
        if(id === res.id){
          this.form.voyName=res.vslName
        }
      })
    },
    re() {
      this.$forceUpdate()
    },
    openDialog() {
      this.dialogVisible = true
    },
    add() {
      this.$emit('add')
    },
    set() {
      this.$forceUpdate()
    },
    getDate() {
      this.$emit('add')
    },
    getFile(res) {
      this.$set(this.form,'planAttachmentList',res)
    },
    getWork() {
      this.$api
        .opaAreaCode({
          termCode: this.form.termCode,
        })
        .then((res) => {
          this.dataList.workZone = res.data.data
          this.$forceUpdate()
        })
        .catch()
    },
    remoteMethod(val = ''){
      console.log(this.$route.name,'查询船名航次----------------');
      let params = {
        termCode:'',//码头编码
        schedulesType:(this.$route.name == 'emptyBox' || this.$route.name == 'heavyBox')?'CONTAINER':'',//件散货BULK_CARGO，集装箱CONTAINER

        iefg:(this.$route.name == 'emptyBox' || this.$route.name == 'heavyBox')?'I':'',//进出口 进口I,出口E
        something:val,//模糊查询参数
      }
      if(this.$route.name == 'emptyBox' || this.$route.name == 'heavyBox'){
        params.type = 'V'
      }
      this.$api.voyagesVslVoy(params).then(res=>{
            this.shipNo=res.data
            console.log(999)
            console.log(this.form)
            if(this.form.id){
              console.log(777)
              this.voyId(this.form.voyId)
            }
          }).catch()
    },
    setFile() {
      this.dataList = {
        INTERNALFG_IM: [],
        sell: [],
        customer: [],
        consignor: [],
        cstTrnscomCd: [],
        workZone: [],
      }
      this.$api.term().then(res => {
					this.termList = res.data.data
			})
      this.$api
        .refCode({
          domain: 'SETTLEMODE',
        })
        .then((res) => {
          this.dataList.SETTLEMODE = res.data.data
          this.$forceUpdate()
        })
        .catch()
      this.$api
        .customerByType({
          tenantTypeName: '货主',
        })
        .then((res) => {
          this.dataList.consignor = res.data.data
          this.$forceUpdate()
        })
        .catch()
      this.$api
        .customerByType({
          tenantTypeName: '运输公司',
        })
        .then((res) => {
          this.dataList.cstTrnscomCd = res.data.data
          this.$forceUpdate()
        })
        .catch()
      this.$api
        .customer()
        .then((res) => {
          this.dataList.cstCoperListtomer = res.data.data
          this.$forceUpdate()
        })
        .catch()
        let params = {
          termCode:'',//码头编码
          schedulesType:(this.$route.name == 'emptyBox' || this.$route.name == 'heavyBox')?'CONTAINER':'',//件散货BULK_CARGO，集装箱CONTAINER

          iefg:(this.$route.name == 'emptyBox' || this.$route.name == 'heavyBox')?'I':'',//进出口 进口I,出口E
          something:'',//模糊查询参数
        }
        if(this.$route.name == 'emptyBox' || this.$route.name == 'heavyBox'){
          params.type = 'V'
        }
        this.$api.voyagesVslVoy(params).then(res=>{
            this.shipNo=res.data
            console.log(999)
            console.log(this.form)
            if(this.form.id){
              console.log(777)
              this.voyId(this.form.voyId)
            }
          }).catch()


      this.$api
        .refCode({
          domain: 'INTERNALFG_IM',
        })
        .then((res) => {
          console.log(res,'----------------------------refCode');
          this.dataList.INTERNALFG_IM = res.data.data
          this.$forceUpdate()
        })
        .catch()
      let info = localStorage.getItem('userInfo')
      console.log(info)
      if (undefined !== info && !this.form.cstCstmcd) {
        this.form.cstCstmcd = JSON.parse(info).customerCode
        this.form.createUser = JSON.parse(info).name
      }
    },
  },

  computed: {},
  created() {
    this.setFile()
  },
  mounted() {
    this.oriForm = JSON.parse(JSON.stringify(this.form))
  },
}
</script>
<style lang='less' scoped>
.title {
  height: 50px;
  background: #0f47b8;
  color: #fff;
  font-size: 16px;
  padding-left: 30px;
  display: flex;
  align-items: center;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
/deep/ .el-form-item__label {
  //text-align: left;
  padding-left: 10px;
}
/deep/ .el-upload--picture-card {
  width: 80px;
  height: 80px;
  line-height: 80px;
}
.btn {
  text-align: right;
  .add {
    margin-left: 10px;
    background: #0f47b8;
    height: 30px;
    padding: 5px 10px;
  }
}
.content {
  padding: 20px;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
  border-radius: 5px;
  border: 1px solid #d7d7d7;
  border-top: none;
}
.line {
  border-bottom: 1px solid #d7d7d7;
  margin-bottom: 20px;
}
</style>